<template>
  <div>
    <el-dialog
      :title="type?'添加菜单':'编辑菜单'"
      :visible.sync="menuVisible"
      width="40%">
      <el-form :model="menuForm"  status-icon :rules="menuRule" ref="menuForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="菜单类型" prop="category">
          <el-radio v-model="menuForm.category" label="1">一级菜单</el-radio>
          <el-radio v-model="menuForm.category" label="0">子菜单</el-radio>
        </el-form-item>
        <el-form-item label="菜单名称" prop="name">
          <el-input type="text"  placeholder="请输入菜单名称" v-model="menuForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="组件" prop="component">
          <el-input type="text"  placeholder="请输入组件" v-model="menuForm.component" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单路径" prop="path">
          <el-input type="text"  placeholder="请输入菜单路径" v-model="menuForm.path" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单图标" prop="iconCls">
          <el-input type="text"  placeholder="请输入菜单图标" v-model="menuForm.iconCls" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否启用" prop="enabled">
          <el-radio v-model="menuForm.enabled"  :label="true">是</el-radio>
          <el-radio v-model="menuForm.enabled" :label="false">否</el-radio>
        </el-form-item>
        <el-form-item label="url" prop="trainContent">
          <el-input type="text"  placeholder="请输入菜单路径" v-model="menuForm.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">提交</el-button>
          <!--          <el-button @click="resetForm('trainForm')">重置</el-button>-->
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Menu",
  props: {
    menuForm: {
      type: Object
    },
    menuVisible: {
      type: Boolean,
      default:false
    },
    type: {
      type: Boolean,
      default:false
    }
  },
  data(){
    return{
      menuVisible:false,
      menuForm:{
        enabled:true,
        category:0,
        parentId:0,
        requireAuth:true,
      },
      menuRule:{

      }
    }
  },
  methods:{
    submitForm(){
      if(this.type){
        this.postRequest("/system/cfg/addMenu",this.menuForm).then((resp)=>{
          if(resp){
            this.menuVisible = false;
          }
        })
      }else{
        this.postRequest("/system/cfg/editMenu",this.menuForm).then((resp)=>{
          if(resp){
            this.menuVisible = false;
          }
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
